// 页面加载后创建 MVC 对象
$(function() {
	// 初始化 MVC 对象
	var MVC = MVC || {};

	// 初始化 MVC 数据模型层
	MVC.model = function() {
		// 内部数据对象
		var M = {};
		// 服务器端获取的数据，通常通过Ajax获取并存储，后面的案例为
		// 简化实现，直接作为同步数据卸载页面中，减少服务器端异步请求操作
		M.data = {
			// 左侧侧边栏导航服务端请求得到的响应数据
			slideBar: [
				{
					text: '萌妹子',
					icon: 'left_meng.png',
					title: '喵耳萝莉的千本樱',
					content: '自古有女友三好~',
					img: 'left_meng_img.png',
					href: 'http://moe.hao123.com'
				}, {
					text: '动漫',
					icon: 'left_comic.png',
					title: '喵耳萝莉的千本樱',
					content: '自古有女友三好~',
					img: 'left_comic_img.png',
					href: 'http://moe.hao123.com/dongman/'
				}, {
					text: 'lol直播',
					icon: 'left_lol.png',
					title: '喵耳萝莉的千本樱',
					content: '自古有女友三好~',
					img: 'left_lol_img.png',
					href: 'http://moe.hao123.com/video/lol'
				}, {
					text: '网络剧',
					icon: 'left_tv.png',
					title: '喵耳萝莉的千本樱',
					content: '自古有女友三好~',
					img: 'left_tv_img.png',
					href: 'http://moe.hao123.com/video/yuanchuang'
				}, {
					text: '热帖',
					icon: 'left_tie.png',
					title: '喵耳萝莉的千本樱',
					content: '自古有女友三好~',
					img: 'left_tie_img.png',
					href: 'http://moe.hao123.com/gaoxiao/retie'
				}
			],
			/*新增模块追加代码*/
			newsMod: [
			]
		};
		// 配置数据，页面加载时即提供
		M.conf = {
			// 侧边导航动画配置数据
			slideBarCloseAnimate: false
			/*新增模块追加代码*/
			// newModConf...
		}
		// 返回数据模型层对象操作方法
		return {
			// 获取服务器端数据
			getData: function(m) {
				// 获取服务器端数据
				return M.data[m];
			},
			// 获取配置数据
			getConf: function(c) {
				// 根据配置数据字段获取配置数据
				return M.conf[c];
			},
			// 设置服务器端数据（通常将服务器端异步获取到的数据，更新该数据）
			setData: function(m, v) {
				M.data[m] = v;
				return this;
			},
			// 设置配置数据（通常在页面中执行某些操作，为做记录而更新配置数据）
			setConf: function(c, v) {
				M.conf[v] = v;
				return this;
			}
		}
	}();

	// MVC 视图层
	MVC.view = function() {
		var M = MVC.model;
		var V = {
			// 创建侧边当行模块视图
			createSliderBar: function() {
					// 导航图标内容
				var html = '',
					// 视图渲染数据
					data = M.getData('sliderBar');
				// 屏蔽无效数据
				if (!data || !data.length) {
					return;
				}
				// 视图容器模板
				var dom = $.create('div', {
					class: 'sliderbar',
					id: 'sliderbar'
				});
				// 导航图标模块模板
				var tpl = {
					container: `
						<div class="sliderbar-inner"><ul>{{content}}</ul></div>
						<a hidefocus href="#" c;ass="sliderbar-close" title="收起"></a>`,
					item: `
						<li>
							<a href="{{href}}" class="icon">
								<img src="common/img/{{icon}}" alt="">
								<span>{{text}}</span>
							</a>
							<div class="box">
								<div>
									<a href="{{href}}" class="title">{{title}}</a>
									<a href="{{href}}">{{content}}</a>
								</div>
								<a href="{{href}}" class="image">
									<img src="common/img/{{img}}" alt="">
								</a>
							</div>
						</li>`
				};
				// 渲染全部导航图片模块
				for (var i = 0, len = data.length; i < len; i++) {
					html += $.formatString(tpl.item, data[i]);
				}
				// 在页面中创建侧边导航视图
				dom
					.html( $.formatString(tpl.container, {content: html}) )
					.appendTo('body');
			},
			/*新增模块追加代码*/
			createNewMod: function() {
			}
		};
		// 获取视图接口方法
		return function(v) {
			V[v]();
		}
	}();
	
	// MVC 控制器层
	MVC.ctrl = function() {
		// 模型数据层对象操作方法引用
		var M = MVC.model();
		// 视图数据层对象操作方法引用
		var V = MVC.view();
		// 控制器创建方法对象
		var C = {
			// 侧边导航兰模块
			initSliderBar: function() {
				// 渲染导航栏模块视图
				V('createSliderBar');
				$('li', 'sliderbar')
				.on('mouseover', function(e) {
					$(this).addClass('show');
				})
				.on('mouseout', function(e) {
					$(this).removeClass('show');
				});
				$('.sliderbar-close', 'sliderbar')
				.on('click', function(e) {
					// 如果正在执行动画
					if(M.getConf('sliderBarCloseAnimate')) {
						// 终止操作
						return false;
					}
					// 设置侧边导航模块动画配置数据开关为打开状态
					M.setConf('sliderBarCloseAnimate', true);
					// 获取当前元素（箭头icon）
					var $this = $(this);
					// 如果箭头 icon 是关闭状态（含有 is-close 类）
					if ($this.hasClass('is-close')) {
						// 为侧边导航模块添加显示动画
						$('.sliderbar-inner', 'sliderbar')
						.animate({
							// 动画时间
							duration: 800,
							// 动画类型
							type: 'easeOutQuart',
							// 动画主函数
							main: function(dom) {
								// 每一帧改变导航模块容器 left 值
								dom.css('left', -50 + this.tween * 50 + 'px');
							},
							// 动画结束时回调函数
							end: function() {
								$this.removeClass('is-close');
								M.setConf('sliderBarCloseAnimate', false);
							}
						});
					// 如果箭头 icon 是打开状态（不含 is-close 类）
					} else {
						$('.sliderbar-inner', 'sliderbar')
						.animate({
							duration: 800,
							type: 'easeOutQuart',
							main: function(dom) {
								dom.css('left', this.tween * -50 + 'px');
							},
							end: function() {
								$this.addClass('is-close');
								M.setConf('sliderBarCloseAnimate', false);
							}
						});
					}
				});
			}(),
			/*新增模块追加代码*/
			initNewMod: function() {
			}()
		};
	}();
});
